<template>
  <el-card class="glass-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span>LCD 灯</span>
        <el-tag size="small" effect="plain">{{ items.length }} 项</el-tag>
      </div>
    </template>
    <div class="lights-grid">
      <div
        v-for="(it, idx) in items"
        :key="idx"
        class="light-item"
        :class="statusClass(it.status)"
        :title="it.name || '未命名'"
      >
        <div class="light-dot" />
        <div class="light-name">{{ it.name || '—' }}</div>
      </div>
    </div>
  </el-card>
  
</template>

<script setup lang="ts">
import type { LcdItem } from "@/api/hmi/home.api";

defineOptions({ name: "LcdLightsCard" });

const props = defineProps<{ items: LcdItem[] }>();

const statusClass = (status: number) => {
  if (status === 1) return "on";
  if (status === 2) return "error";
  if (status >= 3) return "off";
  return "off";
};
</script>

<style scoped lang="scss">
.glass-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.lights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.light-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  .light-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
  }
  .light-name {
    flex: 1;
    color: #1f2937;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 状态样式
.on {
  .light-dot {
    background: radial-gradient(circle at 30% 30%, #6ef3a5, #31c96d);
    box-shadow: 0 0 12px rgba(49, 201, 109, 0.7);
    animation: pulse 1.6s ease-in-out infinite;
  }
}
.warn {
  .light-dot {
    background: radial-gradient(circle at 30% 30%, #ffd77a, #ffb54d);
    box-shadow: 0 0 12px rgba(255, 181, 77, 0.7);
    animation: pulse 2s ease-in-out infinite;
  }
}
.error {
  .light-dot {
    background: radial-gradient(circle at 30% 30%, #ff9b9b, #ff4d4d);
    box-shadow: 0 0 12px rgba(255, 77, 77, 0.7);
    animation: pulse 1.2s ease-in-out infinite;
  }
}
.off {
  .light-dot {
    background: radial-gradient(circle at 30% 30%, #e5e7eb, #cbd5e1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
</style>

